<template>
	<view v-if="pageShow">
		<!-- 分享二维码 -->
		<u-popup :show="fxshow" @close="fxclose" mode="center">
			<view class="mainpadding block erwmbjsty">
				<view class="mainpadding2s radius ffffff" style="width: 428rpx;">
					<view class="erwmtu">
						<image src="../static/image/system/ms.png" mode=""></image>
					</view>
					<view class="margin_top2">
						<view class="ershiba xiaohei nofonweight">套餐名称</view>
						<view class="margin_top1 xiaohui ershil nofonweight">
							详情内容详情内容详情内容详情内容详情内容详情内容详情
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="xiaolan ershil nofonweight">长按识别图中二维码</view>
					<view class="erwim">
						<image src="../static/image/system/kj.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹框 -->

		<view class="" style="padding-bottom: 150rpx;">
			<!-- 轮播图 -->
			<view class="dingwei">
				<u-swiper :list="dataAll.images_text" circular height="290px"></u-swiper>
				<view class="flexleft icowz">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share">
						<u-icon name="share-square" size="26" color="#f5f5f5"></u-icon>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-icon name="share-square" size="26" color="#f5f5f5" @click="sharePoster()"></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<!-- 商品内容 -->
			<view class="husebox mainpadding">
				<view class="flexleft">
					<view class="bigtext xiaobai fonweight">{{dataAll.score}}</view>
					<view class="strongtext xiaobai nofonweight">积分</view>
					<template v-if="Number(dataAll.price)">
						<view class="bigtext xiaobai fonweight">+{{dataAll.price}}</view>
						<view class="strongtext xiaobai nofonweight">元</view>
					</template>
				</view>
				<view class="strongtext xiaobai nofonweight margin_top1">原价：¥{{dataAll.yj_price}} 丨 已售{{dataAll.sales}}
				</view>
			</view>
			<view class="mainpadding ffffff">
				<view class="titletext xiaohei nofonweight">{{dataAll.name}}</view>
				<view class="strongtext xiaohui nofonweight margin_top2">{{dataAll.des}}</view>
			</view>
			<view class="mainpadding ffffff margin_top1">
				<view class="huibox">{{dataAll.fw_des}}</view>
			</view>
			<view class="mainpadding ffffff margin_top1">
				<u-tabs :list="list2" :scrollable="false" lineColor="#1ba95b" @click="changetab" :activeStyle="{
					    color: '#1ba95b',
					}" :inactiveStyle="{
					            color: '#222222',
					        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
				<template v-if="tabsid==1">
					<u-parse :content="dataAll.content"></u-parse>
				</template>
				<template v-if="tabsid==2">
					<image :src="item" mode="widthFix" style="width: 100%;"
						v-for="(item,index) in dataAll.ggcs_images_text" :key="index"
						@click="lbtpriview(index,dataAll.ggcs_images_text)"></image>
				</template>
				<template v-if="tabsid==3">
					<view class="strongtext margin_top flexright"
						@click="jumpurl('/pages_homepage/yonghupj?type=1&id=',listid)">
						<text>查看全部</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="margin_top xiahuaxian" v-for="item in listpj" :key="item.id">
						<view class="flexbetween ">
							<view class="flexleft">
								<view class="touxiang margin_right2">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class="">
									<view class="titletext fonweight xiaohei">{{item.user.nickname}}</view>
									<view class="strongtext nofonweight xiaohui">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="flexright">
								<u-icon name="star-fill" color="#F8B900" size="22" v-for="ite in item.score"
									:key="ite"></u-icon>
							</view>
							<!-- <u-icon name="star" color="#999999" size="22"></u-icon> -->
						</view>
						<view class="margin_top2 xiaohei ershiba nofonweight">{{item.content}}</view>
						<view class="flexleft flex_wrap">
							<view class="sanshis flexcenter margin_top2" v-for="(ite,inde) in item.images_text"
								:key="inde">
								<view class="jiaolt">
									<image :src="ite" mode="" @click="lbtpriview(inde,item.images_text)"></image>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding ffffff flexbetween">
			<view class="flexleft">
				<view class="bigtext xiaohong fonweight">{{dataAll.score}}
					<text class="xiaohong strongtext fonweight">积分</text>
				</view>
				<view class="bigtext xiaohong fonweight" v-if="Number(dataAll.price)">+{{dataAll.price}}
					<text class="xiaohong strongtext fonweight">元</text>
				</view>
			</view>
			<view class="xiaobtnty" @click="tzqrdd">立即抢购</view>
		</view>
		<zhangyu-qrcode-poster ref="poster" :title="dataAll.name" :subTitle="dataAll.des"
			:headerImg="dataAll.image_text" price=""></zhangyu-qrcode-poster>
	</view>
</template>

<script>
	// import QrcodePoster from '@/components/zhangyu-qrcode-poster.vue'

	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				fxshow: false,
				list2: [{
						name: '商品详情',
						value: 1,
					},
					{
						name: '规格参数',
						value: 2
					},
					{
						name: '用户评价',
						value: 3
					}
				],
				tabsid: "1",
				listid: "",
				dataAll: {},
				pageShow: false,
				listpj: [],
				qrcodeurl: "",
				ewmimg: ""
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
			}
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
			}
			console.log(options,"接收的参数");
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); 
				}
				console.log(theRequest,"二维码接收的参数");
				this.listid = options.id ? options.id : (theRequest.id ? theRequest.id :
					0);
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
			}
			// #endif
			this.getDetail()
			this.init()
			// #ifdef APP-PLUS
			this.getewm()
			// #endif
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			let _this = this
			return {
				title: this.dataAll.name,
				path: "pages_mypage/shangpinxq?id=" + this.listid + "&rec_user_id=" + uni.getStorageSync("user_id") || 0,
			}
		},
		// #endif
		methods: {
			getewm() {
				httpRequest.request("/api/user/getCodeImage", 'GET', {
					type_id: this.listid,
					type: 5 //1=场地,2=课程,3=赛事,4=活动,5=商城
				}, false, false, true).then(res => {
					this.ewmimg = res.data.code_image
				})
			},
			sharePoster() {
				//获取带参数二维码
				this.$refs.poster.showCanvas(this.ewmimg)
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			init() {
				let _this = this;
				let data = {
					page: 1,
					limit: 2,
					goods_id: this.listid
				}
				let url = '/api/scoregoods/goodsCommentList'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						this.listpj = res.data.data;
						this.list2[2].name = "用户评价(" + res.data.total + ")"
					}
				})
			},
			getDetail() {
				httpRequest.request('/api/scoregoods/scoreGoodsDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			// 跳转确认订单
			tzqrdd() {
				let data = {
					type: "detail",
					data: [{
						goods_id: this.listid,
						number: 1,
					}]
				}
				uni.navigateTo({
					url: '/pages_mypage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			changetab(e) {
				this.tabsid = e.value
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huibox {
		padding: 20rpx 30rpx;
		background: #FAFAFA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	page {
		background-color: #F9F9F9;
	}

	.husebox {
		background: linear-gradient(180deg, #FF9364 0%, #F76222 100%);
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}
</style>